<template>
	<view class="ztimg_container" :class="classid ? classid :''" :style="{
				'z-index': zindex,
				height: pos_inited[3] + 'rpx',
				width: pos_inited[2] + 'rpx',
				top: pos_inited[1] + 'rpx',
				left: pos_inited[0] + 'rpx',
				transform: 'translate(' + cStv.offsetX + 'rpx, ' + cStv.offsetY + 'rpx) scale(' + cStv.scale + ') rotate(' + cStv.rotate + 'deg)'
			}" v-if="has_inite === 1" @click="selected">
		<!-- 点击替换图片 -->
		<view class="tips" v-if="status == 1 && ismoving == 0" @click.stop="updateimg"
			:style="{left: pos_inited[2] / 2 - 93 + 'rpx', transform: 'translate(0, ' + (15 * (1 - 1 / cStv.scale) - 50) + 'rpx) scale(' + (1 / cStv.scale) + ') rotate(0deg)'}">
			点击替换图片
		</view>

		<!--图片内容-->
		<view class="ztimg_content"
			:style="{height: pos_inited[3] + 'rpx', width: pos_inited[2] + 'rpx', top: '0', left: '0'}">
			<image :src="originImg.path"
				:style="{height: pos_inited[3] + 'rpx', width: pos_inited[2] + 'rpx', transform: 'translate(' + imgStv.offsetX + 'rpx, ' + imgStv.offsetY + 'rpx) scale(' + imgStv.scale + ') rotate(' + imgStv.rotate + 'deg)', opacity: toumingdu / 100}">
			</image>
		</view>
		<!--图片框 -->
		<view class="ztimg_kuang"
			:style="{height: pos_inited[3] + 6 + 'rpx', width: pos_inited[2] + 4 + 'rpx', top: '-2rpx', left: '-2rpx'}"
			v-if="status === 1 || checkbox == true">
			<view class="btn_zoom"
				:style="{bottom: '-25rpx', right: '-25rpx', transform: 'translate(0rpx, 0rpx) scale(' + (1 / cStv.scale) + ') rotate(0deg)'}"
				@touchmove.stop="touchmove" @touchstart.stop="touchstart"
				@touchend.stop="touchend" data-type="3" v-if="ismoving === 0">
				<image class="btn_zoom-img" src="../../static/tubiao/5.png"></image>
			</view>
			<view class="btn_zoom"
				:style="{bottom: '-25rpx', left: '-25rpx', transform: 'translate(0rpx, 0rpx) scale(' + (1 / cStv.scale) + ') rotate(0deg)'}"
				v-if="ismoving === 0" @click="go_down">
				<image class="btn_zoom-img" src="../../static/tubiao/3.png"></image>
			</view>
			<view class="btn_zoom"
				:style="{top: '-25rpx', right: '-25rpx', transform: 'translate(0rpx, 0rpx) scale(' + (1 / cStv.scale) + ') rotate(0deg)'}"
				v-if="ismoving === 0" @click="go_up">
				<image class="btn_zoom-img" src="../../static/tubiao/4.png"></image>
			</view>
			<view class="btn_close"
				:style="{top: '-20rpx', left: '-20rpx', transform: 'translate(0rpx, 0rpx) scale(' + (1 / cStv.scale) + ') rotate(0deg)'}"
				@click="del" v-if="ismoving === 0">
				<image class="btn_zoom-img" src="../../static/tubiao/2.png"></image>
			</view>
		</view>
		<!--旋转按钮-->
		<view class="btn_xuanzhuan_view" v-if="status === 1 && ismoving === 0" @touchmove.stop="touchmove"
			@touchstart.stop="touchstart" @touchend.stop="touchend" data-type="0"
			:style="{bottom: -11 - (1 / cStv.scale - 1) * 5.5 + 'vw', left: pos_inited[2] / 2 - 37.5 + 'rpx', transform: 'translate(0rpx, 0rpx) scale(' + (1 / cStv.scale) + ') rotate(0deg)'}">
			<image src="../../static/tubiao/1.png" class="btn_xuanzhuan"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ztimg',
		props: {
			classid: {
				type: String,
				value: ''
			},
			checkbox: {
				type: Boolean,
				value: false
			},
			newScale: {
				type: Number,
				value: 1
			},
			dataid: {
				type: Number,
				value: ''
			},
			imgsrc: {
				type: String,
				value: ''
			},
			pPos: {
				type: Array,
				value: []
			},
			status: {
				type: Number,
				value: 0
			},
			zindex: {
				type: Number,
				value: 0
			},
			toumingdu: {
				type: Number,
				value: 100
			},
			ismoving: {
				type: Number,
				value: 0
			},
			rpxTopx: {
				type: Number,
				value: 0
			},
			cStv: {
				type: Object,
				value: {
					offsetX: 0,
					offsetY: 0,
					scale: 1,
					rotate: 0,
				}
			},
			imgStv: {
				type: Object,
				value: {
					offsetX: 0,
					offsetY: 0,
					scale: 1,
					rotate: 0,
				}
			},
		},
		watch: {
			imgsrc: {
				handler(newval, oldval) {
					this.initePic();
				},
				deep: true,
				immediate: true
			},
			newScale: {
				handler(newval, oldval) {

				},
				deep: true,
				immediate: true
			},
		},
		data() {
			return {
				//固定尺寸，方便修改
				yuanhuan_pian: -6,
				has_inite: 0,
				pos_inited: [],
				originImg: null,
				//触屏相关
				type: 0,
				touch_start_pos: [0, 0],
				r: 0,
				center_pos: [0, 0], //初始化的
				cur_center_pos: [0, 0], //平移后的
				is_move: 0,
				cur_chexiao: null,
				start_scale:''
			}
		},
		onLoad() {

		},
		methods: {
			del: function() {
				var a = {
					id: 1 + ':' + this.dataid,
					index: this.dataid
				}
				this.$emit("del", a)
			},
			updateimg() {
				var a = {
					id: 1 + ':' + this.dataid,
					index: this.dataid
				}
				this.$emit("updateimg", a)
			},
			touchstart: function(e) {
				// console.log(142, e)
				var type = e.currentTarget.dataset.type;
				this.type = type;
				this.touch_start_pos[0] = e.touches[0].pageX;
				this.touch_start_pos[1] = e.touches[0].pageY;
				var cstv = {
					offsetX: this.cStv.offsetX,
					offsetY: this.cStv.offsetY,
					rotate: this.cStv.rotate,
					scale: this.cStv.scale,
				}
				this.cur_chexiao = cstv;
				if (type == 0) //旋转
				{
					var center_pos = [];
					center_pos[0] = this.center_pos[0] + this.cStv.offsetX;
					center_pos[1] = this.center_pos[1] + this.cStv.offsetY;
					this.cur_center_pos = center_pos;
					//计算起始角度
					var rpx_to_px = this.rpxTopx;
					var diff_x = e.touches[0].pageX / rpx_to_px - center_pos[0];
					var diff_y = e.touches[0].pageY / rpx_to_px - center_pos[1];
					console.log(e.touches[0].pageX / rpx_to_px);
					console.log(diff_x);
					console.log(diff_y);
					let x = Math.pow(diff_x, 2)
					let y = Math.pow(diff_y, 2)
					var dis = Math.sqrt(x + y);
					if (diff_y >= 0) {
						this.start_angle = 360 * Math.asin(diff_x / dis) / (2 * Math.PI) + this.cStv.rotate;
					} else if (diff_x >= 0) {
						this.start_angle = 360 * Math.acos(diff_y / dis) / (2 * Math.PI) + this.cStv.rotate;
					} else {
						this.start_angle = 180 - 180 * Math.asin(diff_x / dis) / Math.PI + this.cStv.rotate;
					}
				} else if (type == 3) {
					var center_pos = [];
					center_pos[0] = this.center_pos[0] + this.cStv.offsetX;
					center_pos[1] = this.center_pos[1] + this.cStv.offsetY;
					this.cur_center_pos = center_pos;
					var rpx_to_px = this.rpxTopx;
					var diff_x = e.touches[0].clientX / rpx_to_px - center_pos[0];
					var diff_y = e.touches[0].clientY / rpx_to_px - center_pos[1];
					let x = Math.pow(diff_x, 2)
					let y = Math.pow(diff_y, 2)
					this.start_distance = Math.sqrt(x + y);
					this.start_scale = this.cStv.scale;
				}
			},
			touchmove: function(e) {
				var type = e.currentTarget.dataset.type;
				if (type == 0) {
					this.is_move = 1;
					var center_pos = this.cur_center_pos;
					var rpx_to_px = this.rpxTopx;
					var diff_x = e.touches[0].pageX / rpx_to_px - center_pos[0];
					var diff_y = e.touches[0].pageY / rpx_to_px - center_pos[1];
					let x = Math.pow(diff_x, 2)
					let y = Math.pow(diff_y, 2)
					var dis = Math.sqrt(x + y);
					if (diff_y >= 0) {
						var angle = 180 * Math.asin(diff_x / dis) / Math.PI;
					} else if (diff_x >= 0) {
						var angle = 180 * Math.acos(diff_y / dis) / Math.PI;
					} else {
						var angle = 180 - 180 * Math.asin(diff_x / dis) / Math.PI;
					}
					var rotate = this.start_angle - angle;
					var xifu_jindu = 5;
					if ((rotate > (0 - xifu_jindu)) && (rotate < (0 + xifu_jindu))) {
						rotate = 0
					} else if (((rotate > (-90 - xifu_jindu))) && (rotate < (-90 + xifu_jindu))) {
						rotate = -90
					} else if (((rotate > (-180 - xifu_jindu))) && (rotate < (-180 + xifu_jindu))) {
						rotate = -180
					} else if (((rotate > (-270))) && (rotate < (-270 + xifu_jindu))) {
						rotate = -270
					} else if (((rotate > (90 - xifu_jindu))) && (rotate < (90))) {
						rotate = 90
					}
					this.cStv.rotate = rotate
					this.touch_start_pos[0] = e.touches[0].pageX;
					this.touch_start_pos[1] = e.touches[0].pageY;
				} else if (type == 3) {
					this.is_move = 1;
					var center_pos = this.cur_center_pos;
					var rpx_to_px = this.rpxTopx;
					var diff_x = e.touches[0].clientX / rpx_to_px - center_pos[0];
					var diff_y = e.touches[0].clientY / rpx_to_px - center_pos[1];
					let x = Math.pow(diff_x, 2)
					let y = Math.pow(diff_y, 2)
					var cur_distance = Math.sqrt(x + y);
					this.cStv.scale = this.start_scale * (cur_distance) / this.start_distance;
				}
				var a = {
					id: 1 + ':' + this.dataid,
					index: this.dataid
				}
				this.$emit('stvChanged', this.cStv, a)
			},
			/**
			 * 触屏结束
			 */
			touchend: function(e) {
				if (this.is_move == 1) {
					var cstv = {
						offsetX: this.cStv.offsetX,
						offsetY: this.cStv.offsetY,
						rotate: this.cStv.rotate,
						scale: this.cStv.scale,
					}
					var a = {
						id: 1 + ':' + this.dataid,
						index: this.dataid
					}
					this.is_move = 0;
					this.$emit('addchexiao', [this.cur_chexiao, cstv], a)
				}
			},
			set_stv: function(cStv) {
				this.cStv = cStv
			},
			/**
			 * 选中编辑
			 */
			selected: function() {
				if (this.status == 0) {
					// this.status = 1;
					var a = {
						id: 1 + ':' + this.dataid,
						index: this.dataid
					}
					this.$emit('focus', a)
				}
			},
			go_down: function() {
				var a = {
					id: 1 + ':' + this.dataid,
					index: this.dataid
				}
				this.$emit('down', a)
			},
			go_up: function() {
				var a = {
					id: 1 + ':' + this.dataid,
					index: this.dataid
				}
				this.$emit('up', a)
			},
			/**
			 * 初始化大小位置
			 */
			inite_pos: function(res) {
				var pic_width = res.width;
				var pic_height = res.height;
				var max_width = this.pPos[2] / 2;
				var max_heght = this.pPos[3] / 2;
				var pos_inited = [];
				if ((pic_width / max_width) <= (pic_height / max_heght)) {
					pos_inited[2] = max_heght * pic_width / pic_height;
					pos_inited[3] = max_heght;
					pos_inited[0] = (max_width - pos_inited[2]) / 2 + max_width / 2;
					pos_inited[1] = max_heght / 2;
				} else {
					pos_inited[0] = max_width / 2;
					pos_inited[2] = max_width;
					pos_inited[3] = max_width * pic_height / pic_width;
					pos_inited[1] = (max_heght - pos_inited[3]) / 2 + max_heght / 2;
				}
				//计算中心点
				var center_pos = [];
				center_pos[0] = 375;
				center_pos[1] = 120 + max_heght;
				this.pos_inited = pos_inited
				this.center_pos = center_pos
				var a = {
					id: 'element' + this.dataid,
					index: this.dataid,
					dataid: "1:" + this.dataid
				}
				this.$emit('posInited', pos_inited, a)
				wx.hideLoading();
			},
			/**
			 * 初始化图片
			 */
			initePic: function() {
				var path = this.imgsrc;
				if ((this.imgsrc == '') || (this.pPos.length == 0)) {
					return;
				}
				wx.showLoading({
					title: '初始化中',
				});
				var that = this;
				wx.getImageInfo({
					src: path,
					success(res) {
						that.originImg = res;
						that.has_inite = 1,
							that.inite_pos(res);
					},
					fail: function(res) {
						that.$emit('del')
					},
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.ztimg_container {
		position: absolute;
	}

	.ztimg_content {
		overflow: hidden;
		position: absolute;
	}

	.ztimg_content image {
		/* vertical-align: top; */
		position: absolute;
		left: 0rpx;
		top: 0rpx;
	}

	.ztimg_kuang {
		border: 2rpx solid rgba(153, 153, 153, 0.8);
		position: absolute;
	}

	.btn_xuanzhuan_view {
		width: 10vw;
		height: 11vw;
		position: absolute;
		bottom: -11vw;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.btn_xuanzhuan {
		width: 5vw;
		height: 5vw;
	}

	.ztimg_kuang_yuan {
		width: 12rpx;
		height: 12rpx;
		background: rgba(153, 153, 153, 1);
		border-radius: 50%;
		position: absolute;
	}

	.btn_suofang_heng {
		width: 14rpx;
		height: 6rpx;
		position: absolute;
	}

	.btn_suofang_shu {
		width: 6rpx;
		height: 14rpx;
		position: absolute;
	}

	.btn_zoom {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.btn_zoom-img {
		width: 30rpx;
		height: 30rpx;
	}

	.btn_close {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.tips {
		font-size: 20rpx;
		color: #fff;
		background-color: rgba(0, 0, 0, .6);
		border-radius: 10rpx;
		text-align: center;
		border-radius: 10rpx;
		position: absolute;
		width: fit-content;
		width: 186rpx;
		padding: 10rpx 0;
	}
</style>